<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/tag/localeTag.tld" prefix="t"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>Q & A</title>
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="resources/js/bootstrap.js"></script>
<script type="text/javascript" src="resources/js/qanda.js"></script>
<!-- <script type="text/javascript" src="resources/js/likesAnswer.js"></script>
<script type="text/javascript" src="resources/js/likesQuestion.js"></script>
<script type="text/javascript" src="resources/js/deleteQuestion.js"></script>
<script type="text/javascript" src="resources/js/deleteAnswer.js"></script>
<script type="text/javascript" src="resources/js/banAnswer.js"></script>
<script type="text/javascript" src="resources/js/banQuestion.js"></script> -->
</head>
<body>
	<jsp:include page="parts/header.jsp"></jsp:include>
	<jsp:include page="parts/navigation.jsp"></jsp:include>
	<div class="content">
		<jsp:include page="parts/leftmenu.jsp"></jsp:include>
		<div class="page">
			<table class="table table-condensed">
				<thead>
					<tr id="${question.id}">
						<th class="text-center"><h4>
								<t:locale mName="likes" />
							</h4></th>
						<th class="text-center"><h4>
								<t:locale mName="question.answers" />
							</h4></th>
						<th class="text-center"><h4>
								<t:locale mName="question.title" />
							</h4></th>
						<th class="text-center"><h4>
								<t:locale mName="category" />
							</h4></th>
						<th class="text-center"><h4>
								<t:locale mName="user" />
							</h4></th>
						<th class="text-center"><h4>
								<t:locale mName="time" />
							</h4></th>
					</tr>
					<tr class="text-center" id="${question.id}">
						<td><h4>
								<c:if test="${empty user || user.roleId!=1}">
									<span onclick="likeQuestionUp('${question.id}', $(this));" class="glyphicon glyphicon-circle-arrow-up"></span>
									<span id="${question.id}" class="question">${question.likes}</span>
									<span onclick="likeQuestionDown('${question.id}', $(this));" class="glyphicon glyphicon-circle-arrow-down"></span>
								</c:if>
								<c:if test="${not empty user && user.roleId==1}">
									<span id="${question.id}" class="question">${question.likes}</span>
								</c:if>
							</h4> <img src="${question.photo }" class="img-rounded photo text-center" alt="Avatar">
							<h3>
								<t:locale mName="account.rating" />
								<span class="label label-info">${question.rating}</span>
							</h3></td>
						<td>${question.amountOfAnswers}</td>
						<td>${question.title}</td>
						<td><span onclick="selectCategory('${question.nameOfCategory}')" class="col-xs-11">
								<span class="glyphicon glyphicon-share-alt"></span>
								${question.nameOfCategory}
							</span></td>
						<td>${question.userLogin}</td>
						<td><fmt:formatDate type="both" dateStyle="short" timeStyle="short" value="${question.time}" /></td>
					</tr>
				</thead>
				<tr id="${question.id}">
					<td colspan="6"><div class="well well-lg">${question.text}</div></td>
				</tr>
				<tr id="${question.id}">
					<c:if test="${not empty user && user.id!=question.userId}">
						<c:if test="${user.roleId==2 && user.status==false}">
							<td></td>
							<td><span onclick="confirmDeleteQuestion(${question.id})" class="glyphicon glyphicon-remove-sign"></span></td>
							<td><c:if test="${question.status==false}">
									<span onclick="addBanTimeQuestion(${question.id},${question.userId});" class="glyphicon glyphicon-lock"></span>
								</c:if> <c:if test="${question.status==true}">
									<span class="label label-danger">
										<span class="glyphicon glyphicon-lock"></span>
										<t:locale mName="header.banned" />
									</span>
								</c:if></td>
						</c:if>
						<c:if test="${user.roleId==1}">
							<td></td>
							<td><span onclick="confirmDeleteQuestion(${question.id})" class="glyphicon glyphicon-remove-sign"></span></td>
							<td><c:if test="${question.status==false}">
									<span onclick="addBanTimeQuestion(${question.id},${question.userId});" class="glyphicon glyphicon-lock"></span>
								</c:if> <c:if test="${question.status==true}">
									<span class="label label-danger">
										<span class="glyphicon glyphicon-lock"></span>
										<t:locale mName="header.banned" />
									</span>
								</c:if></td>
						</c:if>
					</c:if>
					<%-- <c:if test="${not empty user && user.roleId==2 && user.status==false && user.id!=question.userId}">
						<c:forEach var="cat" items="${moderatorCategories}">
							<c:if test="${cat.categoryId==question.categoryId}">
								<td></td>
								<td><span onclick="confirmDeleteQuestion(${question.id})" class="glyphicon glyphicon-remove-sign"></span></td>
								<td><c:if test="${question.status==false}">
										<span onclick="addBanTimeQuestion(${question.id},${question.userId});" class="glyphicon glyphicon-lock"></span>
									</c:if> <c:if test="${question.status==true}">
										<span class="label label-danger">
											<span class="glyphicon glyphicon-lock"></span>
											<t:locale mName="header.banned" />
										</span>
									</c:if></td>
							</c:if>
						</c:forEach>
					</c:if> --%>
				</tr>
			</table>
			<form action="showCategoryQuestion" method="GET" id="showCategoryQuestion">
				<input type="hidden" name="categoryName" id="categoryName">
			</form>
			<c:if test="${not empty answers}">
				<h3>
					<t:locale mName="question.answers" />
				</h3>
				<table class="table table-condensed">
					<c:forEach var="a" items="${answers}" varStatus="i">
						<tr id="${a.id}">
							<td><h4>
									<t:locale mName="question.answer" />
									${i.count}
								</h4></td>
						</tr>
						<tr id="${a.id}">
							<td width="20%"  class="text-center"><h4>
									<c:if test="${empty user || user.roleId!=1}">
										<span class="glyphicon glyphicon-circle-arrow-up" onclick="likeAnswerUp('${a.id}', $(this));"></span>
										<span id="${a.id}" class="answer">${a.likes}</span>
										<span class="glyphicon glyphicon-circle-arrow-down" onclick="likeAnswerDown('${a.id}', $(this));"></span>
									</c:if>
									<c:if test="${not empty user && user.roleId==1}">
										<span id="${a.id}" class="answer">${a.likes}</span>
									</c:if>
								</h4> <img src="${a.photo }" class="img-rounded photo text-center" alt="Avatar">
								<h3>
									<t:locale mName="account.rating" />
									<span class="label label-info">${a.rating}</span>
								</h3></td>
							<c:if test="${not empty user && user.roleId==2}">
								<td colspan="4"><div class="well well-lg">${a.text}</div></td>
							</c:if>
							<c:if test="${empty user || user.roleId!=2}">
								<td colspan="2"><div class="well well-lg">${a.text}</div></td>
							</c:if>
						</tr>
						<tr id="${a.id}">
							<td></td>
							<td><fmt:formatDate type="both" dateStyle="short" timeStyle="short" value="${a.time}" /></td>
							<td>${a.login}</td>
							<c:if test="${not empty user && user.id!=a.userId}">
								<c:if test="${user.roleId==2 && user.status==false}">
									<c:forEach var="cat" items="${moderatorCategories}">
										<c:if test="${cat.categoryId==question.categoryId}">
											<td class="text-center"><span onclick="confirmDeleteAnswer(${a.id})" class="glyphicon glyphicon-remove-sign"></span></td>
											<td class="text-center"><c:if test="${a.status==false}">
													<span onclick="addBanTime(${a.userId},${a.id});" class="glyphicon glyphicon-lock"></span>
												</c:if> <c:if test="${a.status==true}">
													<span class="label label-danger">
														<span class="glyphicon glyphicon-lock"></span>
														<t:locale mName="header.banned" />
													</span>
												</c:if></td>
										</c:if>
									</c:forEach>
								</c:if>
								<c:if test="${user.roleId==1}">
									<td class="text-center"><span onclick="confirmDeleteAnswer(${a.id})" class="glyphicon glyphicon-remove-sign"></span></td>
									<td class="text-center"><c:if test="${a.status==false}">
											<span onclick="addBanTime(${a.userId},${a.id});" class="glyphicon glyphicon-lock"></span>
										</c:if> <c:if test="${a.status==true}">
											<span class="label label-danger">
												<span class="glyphicon glyphicon-lock"></span>
												<t:locale mName="header.banned" />
											</span>
										</c:if></td>
								</c:if>
							</c:if>
						</tr>
					</c:forEach>
				</table>
			</c:if>
			<c:if test="${not empty user && user.status==false && user.roleId !=1}">
				<div class="form-group">
					<div class="col-xs-offset-9 col-xs-3 text-center">
						<input type="button" class="btn btn-info" value="<t:locale mName="question.addAnswer"/>" onclick="addAnswerClick()">
					</div>
				</div>
			</c:if>
			<c:if test="${not empty answers}">
				<form action="showQuestionAnswers" method="GET">
					<c:set var="count" scope="request" value="10" />
					<div class="text-center">
						<c:if test="${offset>0}">
							<button type="submit" class="btn btn-info" name="offset" value="${offset-count}">
								<t:locale mName="previous"/>
								<span class="glyphicon glyphicon-chevron-left"></span>
							</button>
						</c:if>
						<c:if test="${offset+count<size}">
							<button type="submit" class="btn btn-info" name="offset" value="${offset+count}">
								<t:locale mName="next"/>
								<span class="glyphicon glyphicon-chevron-right"></span>
							</button>
						</c:if>
					</div>
					<input type="hidden" name="question" value="${question.id}">
				</form>
			</c:if>
			<form class="form-horizontal" role="form" method="POST" action="addAnswer">
				<div id="addAnswer">
					<div class="form-group">
						<div class="col-xs-6">
							<h2>
								<t:locale mName="question.newAnswer" />
							</h2>
						</div>
						<div class="col-xs-6 text-right">
							<span onclick="addAnswerClose()" class="glyphicon glyphicon-remove"></span>
						</div>
					</div>
					<div class="form-group">
						<label for="answerText">
							<t:locale mName="question.inputAnswer" />
						</label>
						<textarea id="answerText" name="answerText" class="form-control nonResizable" rows="6" required="required"></textarea>
					</div>
					<div class="form-group">
						<div class="col-xs-6">
							<input type="submit" class="btn btn-info btn-lg" value="<t:locale mName="question.addNewAnswer" />">
						</div>
						<div class="col-xs-6 text-right">
							<input type="button" class="btn btn-info" value="<t:locale mName="question.addCode" />" onclick="addCodeToAnswer()">
						</div>
					</div>
					<input type="hidden" value="${question.id}" name="qId">
				</div>
			</form>
		</div>
		<div id="banTime">
			<div class="form-horizontal" role="form">
				<div class="form-group">
					<div class="col-xs-8">
						<h3>
							<t:locale mName="question.selectBanTime" />
						</h3>
					</div>
					<div class="col-xs-4 text-right">
						<span onclick="banUserClose()" class="glyphicon glyphicon-remove"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2">
						<select name="timeId" id="timeId">
							<option value="1"><t:locale mName="question.day" /></option>
							<option value="2"><t:locale mName="question.week" /></option>
							<option value="3"><t:locale mName="question.mounth" /></option>
							<option value="4"><t:locale mName="question.year" /></option>
							<option value="5"><t:locale mName="question.permanent" /></option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2">
						<button type="button" class="btn btn-danger" onclick="banUser()">
							<span class="glyphicon glyphicon-remove"></span>
							<t:locale mName="question.ban" />
						</button>
					</div>
				</div>
			</div>
		</div>
		<div id="banTimeQuestion">
			<div class="form-horizontal" role="form">
				<div class="form-group">
					<div class="col-xs-8">
						<h3>
							<t:locale mName="question.selectBanTime" />
						</h3>
					</div>
					<div class="col-xs-4 text-right">
						<span onclick="banUserQuestionClose()" class="glyphicon glyphicon-remove"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2">
						<select name="timeIdQ" id="timeIdQ">
							<option value="1"><t:locale mName="question.day" /></option>
							<option value="2"><t:locale mName="question.week" /></option>
							<option value="3"><t:locale mName="question.mounth" /></option>
							<option value="4"><t:locale mName="question.year" /></option>
							<option value="5"><t:locale mName="question.permanent" /></option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2">
						<button type="button" class="btn btn-danger" onclick="banUserQuestion()">
							<span class="glyphicon glyphicon-remove"></span>
							<t:locale mName="question.ban" />
						</button>
					</div>
				</div>
			</div>
		</div>
		<div id="confirmDeleteQuestion">
			<div class="row">
				<div class="col-xs-9">
					<h4>
						<t:locale mName="leftmenu.confirmQuestion" />
					</h4>
				</div>
				<div class="col-xs-3 text-right">
					<span onclick="confirmDeleteQuestionClose()" class="glyphicon glyphicon-remove"></span>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<button type="button" class="btn btn-danger" onclick="deleteCurrentQuestion()">
						<span class="glyphicon glyphicon-remove"></span>
						<t:locale mName="leftmenu.removeCategory" />
					</button>
				</div>
			</div>
		</div>
		<div id="confirmDeleteAnswer">
			<div class="row">
				<div class="col-xs-9">
					<h4>
						<t:locale mName="leftmenu.confirmAnswer" />
					</h4>
				</div>
				<div class="col-xs-3 text-right">
					<span onclick="confirmDeleteAnswerClose()" class="glyphicon glyphicon-remove"></span>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<button type="button" class="btn btn-danger" onclick="removeAnswer()">
						<span class="glyphicon glyphicon-remove"></span>
						<t:locale mName="leftmenu.removeCategory" />
					</button>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="parts/footer.jsp"></jsp:include>
</body>
</html>